<!--
 * @Descripttion:
 * @version: v1
 * @Author: youhujun 2900976495@qq.com
 * @Date: 2024-09-12 10:58:46
 * @LastEditors: youhujun 2900976495@qq.com
 * @LastEditTime: 2024-09-12 15:11:28
 * @FilePath: \src\pages\youhu\v1\goods\goodsGroup\goodsList\component\tableInfo\goodsProperty.vue
-->
<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="property_box">
          <el-tag class="space" type="info">是否置顶</el-tag>
          <el-select v-model="is_top" class="space" placeholder="请选择">
            <el-option :value="0" label="否" />
            <el-option :value="1" label="是" />
          </el-select>
          <el-button class="space" type="primary" @click="handleToChangeProperty('is_top')">修改</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="property_box">
          <el-tag class="space" type="info">是否推荐</el-tag>
          <el-select v-model="is_recommend" class="space" placeholder="请选择">
            <el-option :value="0" label="否" />
            <el-option :value="1" label="是" />
          </el-select>
          <el-button class="space" type="primary" @click="handleToChangeProperty('is_recommend')">修改</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="property_box">
          <el-tag class="space" type="info">是否新品</el-tag>
          <el-select v-model="is_new" class="space" placeholder="请选择">
            <el-option :value="0" label="否" />
            <el-option :value="1" label="是" />
          </el-select>
          <el-button class="space" type="primary" @click="handleToChangeProperty('is_new')">修改</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="property_box">
          <el-tag class="space" type="info">是否特惠</el-tag>
          <el-select v-model="is_discount" class="space" placeholder="请选择">
            <el-option :value="0" label="否" />
            <el-option :value="1" label="是" />
          </el-select>
          <el-button class="space" type="primary" @click="handleToChangeProperty('is_discount')">修改</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { updateGoodsProperty } from '@/api/youhu-shop/V1/goods/goods'
export default
{
  // 组件名称
  name: 'GoodsProperty',
  // 组件
  components:
    {
    },
  props:
    {
      goods: {
        type: Object,
        default: function()
        {
          return {}
        }
      }
    },
  // 数据
  data()
  {
    return {
      id: 0,
      // 是否置顶
      is_top: 0,
      // 是否推荐
      is_recommend: 0,
      // 是否新品
      is_new: 0,
      // 是否特惠
      is_discount: 0

    }
  },
  // 计算属性
  computed:
    {
    },
  // 监听
  watch:
    {
    },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
    this.id = this.goods.id
    this.is_top = this.goods.is_top
    this.is_recommend = this.goods.is_recommend
    this.is_new = this.goods.is_new
    this.is_discount = this.goods.is_discount
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    handleToChangeProperty(select_property_name)
    {
      const reflectArray = {
        is_top: this.is_top,
        is_recommend: this.is_recommend,
        is_new: this.is_new,
        is_discount: this.is_discount
      }

      const property_name = select_property_name
      const property_value = reflectArray[select_property_name]

      // console.log(property_name)
      // console.log(property_value)

      const param = { id: this.id, property_name: property_name, property_value: property_value }

      updateGoodsProperty(param).then(res =>
      {
        // console.log(res)
        if (res && res.code === 0)
        {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.event.$emit('updateGoodsProperty', 1)
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.property_box{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .space{
    margin-right: 1rem;
  }
  margin-top: 1rem;
  text-align: center;
}
</style>
